<template>
  <div class="home-container">
    <!-- 首页轮播图区域 -->
    <van-swipe :height="175" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in swipeList" :key="index">
        <img :src="item.image_src" alt />
      </van-swipe-item>
    </van-swipe>
    <!-- 分类区域 -->
    <div class="cates">
      <div v-for="(item,index) in catesList" :key="index">
        <img v-if="item.name=='分类'" @click="$router.push('/cates')" :src="item.image_src" alt />
        <img v-else :src="item.image_src" alt />
      </div>
    </div>
    <!-- 首页楼层区域 -->
    <div class="floor">
      <div v-for="(item,index) in floorList" :key="index">
        <div class="floor-title">
          <img :src="item.floor_title.image_src" alt />
        </div>
        <div class="floor-product">
          <!-- 编程式导航指 通过代码的方法控制页面跳转 -->
          <!-- 声明式导航 通过链接标签 实现页面跳转 -->
          <img
            v-for="(productItem,productIndex) in item.product_list"
            :key="productIndex"
            :src="productItem.image_src"
            @click="$router.push(productItem.navigator_url)"
            alt
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swipeList: [],
      catesList: [],
      floorList: []
    };
  },
  // 当组件对象创建完毕之后 执行 created
  // vue 组件创建阶段的四个生命周期
  // beforeCreate --- 组件对象刚创建 但是此时还不能访问data methods等属性
  // created --- 组件对象已经创建完毕 此时可以对data methods进行访问 进行操作
  // beforeMounte --- 组件的ui结构 已经在内存中生成 虚拟dom 已经创建完成
  // mounted --- 当组件已经准备完毕 并且渲染完成
  created() {
    this.getSwipeList();
    this.getCatesList();
    this.getFloorList();
  },
  methods: {
    // 使用async / await 修饰
    async getSwipeList() {
      const { data: res } = await this.$http.get("/home/swiperdata");
      if (res.meta.status !== 200) {
        // 此时表示请求失败
        return this.$toast.fail("数据获取失败");
      }
      this.swipeList = res.message;
    },
    async getCatesList() {
      const { data: res } = await this.$http.get("/home/catitems");
      if (res.meta.status !== 200) {
        // 此时表示请求失败
        return this.$toast.fail("分类数据获取失败");
      }
      this.catesList = res.message;
    },
    async getFloorList() {
      const { data: res } = await this.$http("/home/floordata");
      if (res.meta.status !== 200) {
        // 此时表示请求失败
        return this.$toast.fail("分类数据获取失败");
      }
      this.floorList = res.message;
    }
  }
};
</script>

<style lang="less" scoped>
.home-container {
  padding-bottom: 50px;
}
.van-swipe {
  margin-bottom: 20px;
  .van-swipe-item {
    img {
      width: 100%;
    }
  }
}
.cates {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  img {
    width: 64px;
    height: 70px;
  }
}
.floor {
  .floor-title {
    img {
      height: 25px;
    }
  }
  .floor-product {
    margin-bottom: 10px;
    overflow: hidden; // 触发BFC 重新计算块级盒子的高度
    img {
      margin: 4px;
      float: left;
      height: 80px;
      width: 116px;
    }
    :nth-child(1) {
      height: 168px;
    }
  }
}
</style>